<template>
  <div class="lookTable list-layout">
    <div class="topWrap">
      <span>{{ title }}</span>
      <back-level :goPage="onCancel"></back-level>
<!--      <span @click="onCancel" class="backBtn">-->
<!--        <Icon type="ios-return-left" class="backIcon" />-->
<!--        <span>{{ $t('common.Return') }}</span> &lt;!&ndash; 返回上一级 &ndash;&gt;-->
<!--      </span>-->
    </div>
    <div class="tableContent">
      <Table class="resizable-table" border @on-column-width-resize="(a,b,c,d)=>{onColumnWidthResize(a,b,c,d,'lookTablepage1')}"  :columns="columns" :data="dataSource"> </Table>
    </div>
    <div class="pageWrap mt16">
      <pageLeftTitle :total="total" />
      <Page :total="total" :page-size="pageSize" :page-size-opts="$variable.pageSizes" :current="pageNum"
        @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total />
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import toggleTableOperation from "@/mixins/toggleTableOperation";
export default {
  name: "lookTable",
  props: ["title", "id", "type", "dateTimeRange","orgCodes"],
    mixins:[toggleTableOperation],
  data() {
    return {
      total: 0,
      pageNum: 1,
      pageSize: 10,
      pageSizeOption: [10, 20, 30],
      dataSource: [],
    };
  },
  computed: {
    columns() {
      let columns = [
        {
          // title: "工单号",
          title: `${this.$t('fault.WorkOrderNumber')}`,
          key: "workOrderNo",
          align: "center",
          minWidth: 200,
            resizable: true
        },
        {
          // title: "设备类别",
          title: `${this.$t('设备等级')}`,
          key: "categoryName",
          align: "center",
          minWidth: 180,
            resizable: true,tooltip: true,
          render: (h, params) => {
            return h(
              "div",
              params.row.categoryName ? params.row.categoryName : ''
            );
          },
        },
        {
          // title: `${ this.$t('maintenance.EquipmentName') }`,
          title: `${this.$t('preliminary.EquipmentName')}`,
          key: "deviceName",
          align: "center",
          minWidth: 150,
            resizable: true
        },
        {
          //title: `${ this.$t('maintenance.EquipmentNo') }`,
          title: `${this.$t('maintenance.EquipmentNo')}`,
          key: "deviceNo",
          align: "center",
          minWidth: 200,
            resizable: true
        },
        {
          //title: "公司名称",
          title: `${this.$t('spareParts.company')}`,
          key: "companyName",
          align: "center",
          minWidth: 150,
            resizable: true
        },
        {
          // title: `${ this.$t('common.Installation') }`,
          title: `${this.$t('equipmentscrapped.Location')}`,
          key: "position4",
          align: "center",
          minWidth: 150,
            resizable: true
        },
        {
          // title: "故障位置",
          title: `${this.$t('fault.faultLocation')}`,
          key: "materielName",
          align: "center",
          minWidth: 150,
            resizable: true
        },
        {
          // title: "故障分类",
          title: `${this.$t('fault.FaultClassification')}`,
          key: "faultCategory",
          align: "center",
          minWidth: 150,
            resizable: true
        },
        {
          // title: "故障类型",
          title: `${this.$t('fault.CauseOfFailure')}`,
          key: "faultReason",
          align: "center",
          minWidth: 150,
            resizable: true
        },
      ]
      if (this.type === 1) {
        let arr = [
          {
            // title: "生成工单时间",
            title: `${this.$t('fault.Generation')}`,
            key: "managerConfirmTime",
            align: "center",
            minWidth: 180,
              resizable: true
          },
          {
            // title: "维修员",
            title: `${this.$t('fault.Maintenance')}`,
            key: "receiveOrderByStr",
            align: "center",
            minWidth: 120,
              resizable: true
          },
          {
            // title: "接单时间",
            title: `${this.$t('fault.AcceptingTime')}`,
            key: "receiveOrderTime",
            align: "center",
            minWidth: 180,
              resizable: true
            // tooltip: true,
          },
          {
            // title: "开始维修时间",
            title: `${this.$t('fault.MaintenanceStartTime')}`,
            key: "maintainStartTime",
            align: "center",
            minWidth: 180,
              resizable: true
            // tooltip: true,
          },
          {
            // title: "结束维修时间",
            title: `${this.$t('fault.EndMaintenanceTime')}`,
            key: "maintainEndTime",
            align: "center",
            minWidth: 180,
              resizable: true
            // tooltip: true,
          },
          {
            //  title: "维修持续时长（H）",
            title: `${this.$t('fault.MaintenanceDuration')}（H）`,
            key: "timeOfDuration",
            align: "center",
            minWidth: 200,
              resizable: true
          },
          {
            //  title: "维修评分",
            title: `${this.$t('fault.Scoring')}`,
            key: "maintenanceScore",
            align: "center",
            minWidth: 120,
              resizable: true
          },
        ]
        columns.push(...arr)
      } else {
        let arr = [
          {
            // title: "维修申请时间",
            title: `${this.$t('fault.ApplicationTime')}`,
            key: "maintainApplyTime",
            align: "center",
            minWidth: 180,
              resizable: true
          },
          {
            //  title: "生成工单时间",
            title: `${this.$t('fault.Generation')}`,
            key: "managerConfirmTime",
            align: "center",
            minWidth: 180,
              resizable: true
          },
          {
            //  title: "接单时间",
            title: `${this.$t('fault.AcceptingTime')}`,
            key: "receiveOrderTime",
            align: "center",
            minWidth: 180,
              resizable: true
          },
          {
            //  title: "维修开始时间",
            title: `${this.$t('fault.StartTime')}`,
            key: "maintainStartTime",
            align: "center",
            minWidth: 180,
              resizable: true
            // tooltip: true,
          },
          {
            // title: "维修完工时间",
            title: `${this.$t('fault.FinishTime')}`,
            key: "maintainEndTime",
            align: "center",
            minWidth: 180,
              resizable: true
            // tooltip: true,
          },
          {
            //  title: "维修持续时长（H）",
            title: `${this.$t('fault.MaintenanceDuration')}（H）`,
            key: "timeOfDuration",
            align: "center",
            minWidth: 220,
              resizable: true
          },
          {
            // title: "维修评分",
            title: `${this.$t('fault.Scoring')}`,
            key: "maintenanceScore",
            align: "center",
            minWidth: 120,
              resizable: true
          },
          {
            // title: "维修工时成本（元）",
            title: `${this.$t('fault.MaintenanceManHour')}`,
            key: "hourPrice",
            align: "center",
            minWidth: 280,
              resizable: true
          },
          {
            // title: "维修物料成本（元）",
            title: `${this.$t('fault.MaintenanceMaterial')}`,
            key: "materielPrice",
            align: "center",
            minWidth: 250,
              resizable: true
          },
          {
            // title: "维修总成本（元）",
            title: `${this.$t('fault.MaintenanceTotal')}`,
            key: "sumPrice",
            align: "center",
            minWidth: 250,
              resizable: true
          },
        ]
        columns.push(...arr)
      }
      return columns
    }
  },
  created() {

     this.getColumnWidth(this.columns,'lookTablepage1')



    if (this.id) {
      this.searchList(this.type);
    }
  },
  methods: {
    searchList(type) {
      //查询列表
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        startTime: moment(this.dateTimeRange[0]).format('YYYY-MM-DD 00:00:00'),
        endTime:  moment(this.dateTimeRange[1]).format('YYYY-MM-DD 23:59:59'),
        // orgCodes: this.orgCode.join(','),
      };
      if (type === 1) {
        params.deviceMId = this.id
      } else {
        params.repairManId = this.id
        if (this.orgCodes && this.orgCodes.length){
            params.orgCodes = this.orgCodes.join(',')
        }else {
          params.orgCodes = ''
        }
      }
      this.axios({
        method: "get",
        url: type === 1 ? "/dms/statistical/deviceRepairInfo" : "/dms/statistical/drepairManInfo",
        params: params,
      }).then((res) => {
        if (res.code === 200) {
          this.dataSource = res.data.list;
          this.total = res.data.total;
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.searchList();
    },
    changePageNum(val) {
      this.pageNum = val;
      this.searchList();
    },
    onCancel() {
      this.$emit("cancel");
    },
  },
};
</script>

<style scoped lang="scss">
.lookTable {
  background: #fff;

  .topWrap {
    padding: 10px 20px;
    font-size: 14px;

    .backIcon {
      font-size: 20px;
      vertical-align: middle;
      margin-right: 5px;
    }

    .backBtn {
      color: #2CB1FB;
      margin-left: 20px;
      cursor: pointer;
    }
  }
}
</style>


